<template>
    <div id="notice-detail">
        <el-row class="card-box">
            <el-card class="form-box">
                <el-form :label-position="labePosition" label-width="127px" size="mini">
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知规则名称:">
                                <el-input v-model="ruleForm.ruleName" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知类型:">
                                <el-select placeholder="请选择" style="width: 100%" v-model="ruleForm.noticeType" @change="changeNoticeType">
                                    <el-option
                                        v-for="item in noticeTypeStorage"
                                        :key="item.dictKey"
                                        :label="item.dictKey + ' ' + item.dictKeyName"
                                        :value="item.dictKey"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="触警类型:" v-if="ruleForm.noticeType == '6'">
                                <el-checkbox-group v-model="ruleForm.thresholdType">
                                    <el-checkbox v-for="(value, key) in ThresholdType" :key="key" :label="key">{{ value }}</el-checkbox>
                                </el-checkbox-group>
                            </el-form-item>
                            <el-form-item label="计算类型:" v-else-if="ruleForm.noticeType == '12'">
                                <el-radio v-model="ruleForm.calcType" label="1">自动计算</el-radio>
                                <el-radio v-model="ruleForm.calcType" label="0">手工计算</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>

                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知次数上限:">
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">{{ limitTimeTitle }}</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        通知次数上限：
                                    </span>
                                </template>
                                <el-input v-model="ruleForm.limitTimes" @input.native="onInput" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知日期区间:">
                                <el-date-picker
                                    v-model="ruleForm.dates"
                                    type="daterange"
                                    range-separator="至"
                                    start-placeholder="开始日期"
                                    end-placeholder="结束日期"
                                    style="width: 70%"
                                    @change="handleDate"
                                    value-format="yyyyMMdd"
                                    format="yyyy-MM-dd"
                                >
                                </el-date-picker>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知时间段:">
                                <!-- <el-time-picker
                                    is-range
                                    v-model="ruleForm.times"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"
                                    placeholder="选择时间范围"
                                    style="width:90%"
                                    @change="handleTime"
                                    value-format="HHmmss"
                                    format="HH:mm:ss"
                                >
                                </el-time-picker> -->
                                <el-time-picker
                                    v-model="ruleForm.startTime"
                                    :default-value="defaultTime"
                                    @change="handleTime"
                                    value-format="HHmmss"
                                    format="HH:mm:ss"
                                    placeholder="开始时间"
                                    style="width: 120px"
                                >
                                </el-time-picker>
                                <span style="margin: 0 6px">至</span>
                                <el-time-picker
                                    v-model="ruleForm.endTime"
                                    :default-value="defaultTime2"
                                    @change="handleTime"
                                    value-format="HHmmss"
                                    format="HH:mm:ss"
                                    placeholder="结束时间"
                                    style="width: 120px"
                                >
                                </el-time-picker>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="ruleForm.noticeType == '6'">
                        <el-col :span="8">
                            <el-form-item label="通知条目:">
                                <el-tooltip :disabled="!ruleForm.entryCode || !ruleForm.entryCode.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.entryCode">
                                            {{ e + ' ' + entryStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.entryCode"
                                        @change="changeAccountControlValue(ruleForm.entryCode, 'entryCode')"
                                    >
                                        <el-option v-for="item in entryStorage" :key="item.entryCode" :label="item.entryCode" :value="item.entryCode">
                                            <span style="float: left">{{ item.entryCode + ' ' + item.entryName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知条目组:">
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">若所选通知条目和通知条目组中存在相同的条目，则取其并集；</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        通知条目组:
                                    </span>
                                </template>
                                <el-tooltip :disabled="!ruleForm.entryGroup || !ruleForm.entryGroup.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.entryGroup">
                                            {{ e + ' ' + entryGroupStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.entryGroup"
                                        @change="changeAccountControlValue(ruleForm.entryGroup, 'groupCode')"
                                    >
                                        <el-option
                                            v-for="item in entryGroupStorage"
                                            :key="item.groupCode"
                                            :label="item.groupCode"
                                            :value="item.groupCode"
                                        >
                                            <span style="float: left">{{ item.groupCode + ' ' + item.groupName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="计算类型:">
                                <el-radio v-model="ruleForm.calcType" label="0">自动计算</el-radio>
                                <el-radio v-model="ruleForm.calcType" label="1">手工计算</el-radio>
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row v-if="ruleForm.noticeType == '6'">
                        <el-col :span="8">
                            <el-form-item label="通知产品:">
                                <RiskEntryInputs
                                    :showAll="true"
                                    :interfaceUrl="'/fundInfo/list/byUser/like?fundCodeOrName='"
                                    @set-entry-data="getAccountControlValue"
                                    :returnDatas="ruleForm.fundCode"
                                    :showDis="false"
                                />
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知产品组:">
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">若所选通知产品和通知产品组中存在相同的条目，则取其并集；</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        通知产品组:
                                    </span>
                                </template>

                                <el-tooltip :disabled="!ruleForm.fundGroup || !ruleForm.fundGroup.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.fundGroup">
                                            {{ e + ' ' + fundGroupStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.fundGroup"
                                        @change="changeAccountControlValue(ruleForm.fundGroup, 'fundGroupCode')"
                                    >
                                        <el-option
                                            v-for="item in fundGroup"
                                            :key="item.fundGroupCode"
                                            :label="item.fundGroupCode"
                                            :value="item.fundGroupCode"
                                        >
                                            <span style="float: left">{{ item.fundGroupCode + ' ' + item.fundGroupName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="连续违规天数:≥">
                                <el-input v-model="ruleForm.prohibitionDays" @input.native="onInput" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="4">
                            <el-form-item label="启用状态:" class="left-label">
                                <el-switch v-model="ruleForm.status" active-value="0" inactive-value="1" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="8">
                            <el-form-item label="通知用户:">
                                <el-tooltip :disabled="!ruleForm.noticeUser || !ruleForm.noticeUser.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.noticeUser">
                                            {{ e + ' ' + userStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.noticeUser"
                                        @change="changeAccountControlValue(ruleForm.noticeUser, 'userCode')"
                                    >
                                        <el-option
                                            v-for="item in userStorage"
                                            :key="item.userCode"
                                            :label="item.userName + ' ' + item.userNickName"
                                            :value="item.userCode"
                                        >
                                            <span style="float: left">{{ item.userName + ' ' + item.userNickName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8">
                            <el-form-item label="通知岗位:">
                                <template slot="label">
                                    <span>
                                        <el-tooltip>
                                            <div slot="content">若所选通知用户和通知岗位中存在相同的用户，则取其并集；</div>
                                            <i class="el-icon-question"></i>
                                        </el-tooltip>
                                        通知岗位:
                                    </span>
                                </template>

                                <el-tooltip :disabled="!ruleForm.notifier || !ruleForm.notifier.length" effect="dark" placement="top-start">
                                    <ul slot="content" style="min-height: 18px; max-height: 200px; overflow: auto">
                                        <li :key="e" v-for="e in ruleForm.notifier">
                                            {{ e + ' ' + roleStorageEnum[e] }}
                                        </li>
                                    </ul>

                                    <el-select
                                        placeholder="请选择"
                                        multiple
                                        filterable
                                        collapse-tags
                                        style="width: 100%"
                                        clearable
                                        v-model="ruleForm.notifier"
                                        @change="changeAccountControlValue(ruleForm.notifier, 'roleCode')"
                                    >
                                        <el-option
                                            v-for="item in roleStorage"
                                            :key="item.roleCode"
                                            :label="item.roleCode + ' ' + item.roleName"
                                            :value="item.roleCode"
                                        >
                                            <span style="float: left">{{ item.roleCode + ' ' + item.roleName }}</span>
                                        </el-option>
                                    </el-select>
                                </el-tooltip>
                            </el-form-item>
                        </el-col>
                        <el-col :span="8" v-if="ruleForm.noticeType == '6'">
                            <el-form-item label="正文发送列设置:">
                                <el-select
                                    placeholder="请选择"
                                    multiple
                                    filterable
                                    collapse-tags
                                    style="width: 100%"
                                    clearable
                                    v-model="ruleForm.columns"
                                    @change="changeAccountControlValue(ruleForm.columns, 'dictKey')"
                                >
                                    <el-option
                                        v-for="item in columnsStorage"
                                        :key="item.dictKey"
                                        :label="item.dictKeyName"
                                        :value="item.dictKey"
                                    ></el-option>
                                </el-select>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" v-if="ruleForm.noticeType == '12'">
                            <el-form-item label="超时时长:>">
                                <el-input v-model="ruleForm.timeoutDuration" @input.native="onInput" style="width: 65%"></el-input><span> min</span>
                            </el-form-item>
                        </el-col>
                        <el-col :span="4" v-if="ruleForm.noticeType == '12'">
                            <el-form-item label="启用状态:" class="left-label2">
                                <el-switch v-model="ruleForm.status" active-value="0" inactive-value="1" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </el-form>
            </el-card>
        </el-row>
        <el-row class="card-box">
            <el-card>
                <el-row>
                    <div style="display: inline-block">
                        <span>邮件主题： </span>
                    </div>
                    <div style="display: inline-block">
                        <el-input v-model="ruleForm.emailSubject" :disabled="!isEdit" size="mini" style="width: 1000px"></el-input>
                    </div>

                    <div class="link-box">
                        <el-link icon="el-icon-edit" v-show="!isEdit" @click="handleEdit">编辑</el-link>
                        <el-link icon="el-icon-view" v-show="isEdit" @click="handleEdit">预览</el-link>
                    </div>
                </el-row>
                <el-row class="email-title">
                    <h2 v-show="!isEdit">{{ ruleForm.greeting }}</h2>
                    <div v-show="isEdit" class="title-ipt">
                        <el-input v-model="ruleForm.greeting"></el-input>
                    </div>
                </el-row>
                <el-row style="margin-bottom: 10px">
                    <div v-show="!isEdit" class="text-box">{{ ruleForm.mainBody }}</div>
                    <el-input v-show="isEdit" type="textarea" autosize placeholder="请输入内容" v-model="ruleForm.mainBody"> </el-input>
                </el-row>
                <el-row class="h3-style">
                    <h3>
                        开始时间:<span>--</span> 完成时间:<span>--</span> 耗时:<span>--</span> 总数/成功数/失败数/过滤数: <span>--/--/--/--</span>
                        <span v-if="ruleForm.noticeType == '12'" style="color: #272c36">
                            计算结果提交状态:<span style="color: #f00">--</span> 计算连续违规天数:<span style="color: #f00">--</span></span
                        >
                    </h3>
                </el-row>
                <el-row>
                    <el-table ref="emailTable" :data="emailTable" border size="mini" style="width: 100%" height="calc(100vh - 600px)">
                        <el-table-column v-for="i in emailTableColumns" :prop="i.dictKey" :key="i.dictKey" :label="i.dictKeyName" min-width="100">
                        </el-table-column>
                    </el-table>
                </el-row>
            </el-card>
        </el-row>
        <el-row class="card-box">
            <el-card>
                <div class="btns">
                    <el-button @click="$emit('close-tab', data.name)">取消</el-button>
                    <el-button v-if="isShowSubmit" type="primary" @click="submit" :loading="btnLoading">确认</el-button>
                </div>
            </el-card>
        </el-row>
    </div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch } from 'vue-property-decorator';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { changeOptions } from '@/utils/tools';
import RiskEntryInputs from '@/common/components/risk-entry-inputs.vue';
import * as moment from 'moment';
@Component({
    name: 'WarningNoticeDetailStatic',
    components: { RiskEntryInputs },
})
export default class WarningNoticeDetailStatic extends Vue {
    @Prop() data: any;

    private labePosition: string = 'right';

    defaultTime: any = new Date(0, 0, 0, moment().hour(), 0, 0);
    defaultTime2: any = new Date(0, 0, 0, moment().hour() + 1, 0, 0);
    limitTimeTitle: string = window.project_config.LIMIT_TIMES_TITLE || '该字段为在设置时间段内发送次数上限，非重复发送邮件次数';
    private ruleForm = {
        ruleName: '',
        noticePanel: '',
        noticeType: '6',
        thresholdType: ['1', '2', '3'],
        limitTimes: null,
        dates: [],
        startDate: '',
        endDate: '',
        entryCode: [],
        entryGroup: [],
        roleCodes: [],
        calcType: '0',
        fundCode: '',
        fundGroup: [],
        times: null,
        startTime: '',
        endTime: '',
        noticeUser: [],
        notifier: [], // 通知岗位
        prohibitionDays: '', // 连续违规天数
        timeoutDuration: '30',
        columns: [],
        status: '0',
        emailSubject: '风险报告结果通知', // 邮件标题
        greeting: '静态风控-风险报告结果通知',
        mainBody: '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，"风险报告结果"有更新变动，请及时关注！',
    };

    private noticePanelStorage: any[] = [];

    private thresholdTypeStorage: any[] = [];

    private noticeTypeStorage: any[] = [
        { dictKey: '6', dictKeyName: '风险报告结果' },
        { dictKey: '12', dictKeyName: '风险计算异常' },
    ];

    private fundGroup: any[] = [];
    private fundGroupStorageEnum: any = {};
    private userStorage: any[] = [];
    private userStorageEnum: any = {};
    private showType: string = 'addStatic';

    private btnLoading: boolean = false;

    private columnsStorage: any[] = [
        { dictKey: 'resultId', dictKeyName: '序号' },
        { dictKey: 'staticProcessStatus', dictKeyName: '事件状态' },
        { dictKey: 'errorInfo', dictKeyName: '发起失败原因' },
        { dictKey: 'tradeDate', dictKeyName: '估值日期' },
        { dictKey: 'calculateDate', dictKeyName: '计算日期' },
        { dictKey: 'dictFundCodes', dictKeyName: '产品代码(名称)' },
        { dictKey: 'triggerType', dictKeyName: '触警类型' },
        { dictKey: 'entryCode', dictKeyName: '条目编号' },
        { dictKey: 'entryName', dictKeyName: '风险说明' },
        { dictKey: 'result', dictKeyName: '计算结果(单位)' },
        { dictKey: 'prohibitionDate', dictKeyName: '连续违规天数' },
        { dictKey: 'triggerDay', dictKeyName: '连续触警天数' },
        { dictKey: 'dictStockCodes', dictKeyName: '证券代码(名称)' },
        { dictKey: 'branchValues', dictKeyName: '分支值' },
        { dictKey: 'compareType', dictKeyName: '条目比较方向' },
        { dictKey: 'thresholdValue', dictKeyName: '条目触发值' },
        { dictKey: 'investBalance', dictKeyName: '可投余量' },
        { dictKey: 'legalDays', dictKeyName: '法定调整天数' },
        { dictKey: 'insideDays', dictKeyName: '内部调整天数' },
        { dictKey: 'frequency', dictKeyName: '触发频率次数' },
        { dictKey: 'resultInformation', dictKeyName: '结果信息' },
    ];

    private emailTable: any[] = [
        {
            entryCode: '',
            entryName: '',
            thresholdValue: '',
            fundName: '',
            calculateValue: '',
            calculateLogic: '',
            stockCode: '',
            stockName: '',
            remark: '',
            handleUser: '',
        },
    ];

    private isEdit: boolean = false; // 文本是否在编辑状态

    private ThresholdType: any = DictionConstUtil.ThresholdType; // 触警类型

    private entryStorage: any[] = [];
    private entryStorageEnum: any = {};
    private entryGroupStorage: any[] = [];
    private entryGroupStorageEnum: any[] = [];
    private roleStorage: any[] = [];
    private roleStorageEnum: any = {};
    async mounted() {
        // 条目下拉框
        this.getEntryList();
        // 条目组下拉框
        this.getEntryGroupList();
        // 通知面板下拉框
        this.getNoticePanelList();
        // 用户列表
        this.getUserList();
        // 角色列表
        this.getRoleList();
        // 账户组
        this.getFundGroupList();
        // 触警类型下拉框
        this.thresholdTypeStorage = await SGU_CACHE('ThresholdType', '/dict/list/code/Y_000039', []);
        // 邮件通知类型
        // this.noticeTypeStorage = await SGU_CACHE('NoticeType', '/dict/list/code/Y_000266', []);
        // 邮件表格列下拉框
        // this.columnsStorage = await SGU_CACHE('Columns', '/dict/list/code/Y_000273', []);

        if (this.data.type.indexOf('add') > -1) {
            this.ruleForm.columns = [
                'resultId',
                'staticProcessStatus',
                'errorInfo',
                'tradeDate',
                'calculateDate',
                'dictFundCodes',
                'triggerType',
                'entryCode',
                'entryName',
                'result',
                'prohibitionDate',
                'triggerDay',
                'dictStockCodes',
                'branchValues',
                'compareType',
                'thresholdValue',
                'investBalance',
                'legalDays',
                'insideDays',
                'frequency',
                'resultInformation',
            ];
        }
    }

    // 监听父组件带进来的基础数据
    @Watch('data', { immediate: true, deep: true })
    watchData(newData) {
        if (newData) {
            if (newData.content) {
                let data = JSON.parse(JSON.stringify(newData.content));
                data.dates = [String(...(data.startDate || '')), String(...(data.endDate || ''))];
                data.startTime = String(data.startTime || '');
                data.endTime = String(data.endTime || '');
                // if (data.startTime) {
                //     data.times = [data.startTime.toString(), data.endTime.toString()];
                // } else {
                //     data.times = null;
                // }
                this.ruleForm = data ?? this.ruleForm;
            }
            this.showType = newData.type;
        }
    }
    // 改变通知类型
    changeNoticeType(param) {
        if (param == '6') {
            this.ruleForm.mainBody = '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，"风险报告结果"有更新变动，请及时关注！';
        } else if (param == '12') {
            this.ruleForm.mainBody = '尊敬的领导：\n 您好！\n 根据智能风控工作台监控，本次风险计算结果已发生异常（计算超时/计算失败），请及时关注！';
        }
    }

    get emailTableColumns() {
        let columns = [];
        if (this.ruleForm.columns) {
            for (let i = 0; i < this.ruleForm.columns.length; i++) {
                const element = this.ruleForm.columns[i];
                if (this.columnsStorage.length) {
                    columns.push(this.columnsStorage.find(item => item.dictKey === element));
                }
            }
        }
        return columns;
    }

    get isShowSubmit() {
        return ['addStatic', 'editStatic'].includes(this.showType);
    }

    // 获取条目列表
    private getEntryList(): void {
        this.$axios
            .post('/entry/list/CodeOrName', {
                codeOrName: '',
                entryType: '',
                paging: { currentPage: 1, pageSize: 19960831 },
                filterEntryCode: [],
            })
            .then((res: any) => {
                this.entryStorage = res.list;
                this.changeAccountControlValue(this.ruleForm.entryCode, 'entryCode');
                this.changeAccountControlValue(this.ruleForm.columns, 'dictKey');
                res.list.forEach(element => {
                    this.entryStorageEnum[element.entryCode] = element.entryName;
                });
            });
    }

    // 获取条目列表
    private getEntryGroupList(): void {
        this.$axios.get('/entry/group/list').then((res: any) => {
            this.entryGroupStorage = res;
            this.changeAccountControlValue(this.ruleForm.entryGroup, 'groupCode');
            res.forEach(element => {
                this.entryGroupStorageEnum[element.groupCode] = element.groupName;
            });
        });
    }

    private getNoticePanelList() {
        this.$axios.get('/entry/subscribe/all/panel/user').then((res: any) => {
            this.noticePanelStorage = res;
        });
    }

    private getUserList(): void {
        this.$axios.get('/userManage/user/list').then((res: any) => {
            if (res) {
                this.userStorage = res.filter(item => item.userEnable === '1');
                this.changeAccountControlValue(this.ruleForm.noticeUser, 'userCode');
                // this.userStorage = res;
                res.forEach(element => {
                    this.userStorageEnum[element.userCode] = element.userNickName;
                });
                let noticeUser = JSON.parse(JSON.stringify(this.ruleForm.noticeUser));
                this.ruleForm.noticeUser = noticeUser.filter(key => {
                    const index = this.userStorage.findIndex(item => item.userCode == key && item.userEnable === '1');
                    return index > -1;
                });
            }
        });
    }

    private getRoleList(): void {
        this.$axios.get('/role/query/all').then((res: any) => {
            if (res) {
                this.roleStorage = res;
                this.changeAccountControlValue(this.ruleForm.notifier, 'roleCode');
                res.forEach(element => {
                    this.roleStorageEnum[element.roleCode] = element.roleName;
                });
            }
        });
    }

    // 获取账户组数据
    private getFundGroupList(): void {
        this.$axios.post('/fundGroup/list').then((res: any) => {
            this.fundGroup = res;
            this.changeAccountControlValue(this.ruleForm.fundGroup, 'fundGroupCode');
            res.forEach(element => {
                this.fundGroupStorageEnum[element.fundGroupCode] = element.fundGroupName;
            });
        });
    }

    private handleDate(val: any) {
        if (val && val.length) {
            this.ruleForm.startDate = val[0];
            this.ruleForm.endDate = val[1];
            return;
        }
        this.ruleForm.startDate = '';
        this.ruleForm.endDate = '';
    }

    // private handleTime(val: any) {
    //     console.log(val, 'val');
    //     if (val && val.length) {
    //         this.ruleForm.startTime = val[0];
    //         this.ruleForm.endTime = val[1];
    //         return;
    //     }
    //     this.ruleForm.startTime = '';
    //     this.ruleForm.endTime = '';
    // }

    private handleTime() {
        if (this.ruleForm.startTime && this.ruleForm.endTime) {
            if (this.ruleForm.startTime > this.ruleForm.endTime) {
                this.yh_message_warn('开始时间不得晚于结束时间!');
                this.ruleForm.startTime = '';
                this.ruleForm.endTime = '';
                return;
            }
        }
    }

    private getAccountControlValue(val: any) {
        this.ruleForm.fundCode = val;
    }

    private submit() {
        if (!this.verify()) {
            return;
        }
        this.ruleForm.limitTimes = this.ruleForm.limitTimes ? Number(this.ruleForm.limitTimes) : null;

        this.btnLoading = true;

        let urlType = {
            addStatic: '/notice/monitor/rule/add',
            editStatic: '/notice/monitor/rule/update',
        };
        let url = urlType[this.showType];
        this.$axios({ url, method: 'post', data: this.ruleForm })
            .then((res: any) => {
                this.btnLoading = false;
                this.yh_message_success('操作成功！');
                this.$emit('close-tab', this.data.name);
            })
            .catch(() => {
                this.btnLoading = false;
            });
    }

    private verify() {
        if (!this.ruleForm.ruleName) {
            this.yh_message_warn('规则名称不能为空！');
            return false;
        }
        if (!this.ruleForm.noticeUser.length) {
            this.yh_message_warn('通知用户不能为空！');
            return false;
        }
        // let reg = /^[1-9]\d*$/g;
        // if (!reg.test(this.ruleForm.limitTimes)) {
        //     this.$message({ type: 'warning', message: '通知次数上限不能小于1！' });
        //     return false;
        // }
        if (this.ruleForm.noticeType == '6') {
            if (!this.ruleForm.columns.length) {
                this.yh_message_warn('正文发送列不能为空！');
                return false;
            }
        }
        if (this.ruleForm.noticeType == '12') {
            if (this.ruleForm.timeoutDuration == '') {
                this.yh_message_warn('超时时长不能为空！');
                return false;
            }
        }
        return true;
    }

    // 下拉框数据置顶
    private changeAccountControlValue(val: any = [], field): void {
        // let arr = [];
        // if (val.some(item => item === '-1')) {
        //     arr.push({ label: '选择全部' });
        // } else {
        //     if (field === 'roleCode') {
        //         this.changeByFund();
        //     }
        // }

        // 下拉框选中数据置顶
        if (field == 'fundGroupCode') {
            this.fundGroup = changeOptions(val, this.fundGroup, field);
        } else if (field == 'userCode') {
            this.userStorage = changeOptions(val, this.userStorage, field);
        } else if (field == 'entryCode') {
            this.entryStorage = changeOptions(val, this.entryStorage, field);
        } else if (field == 'groupCode') {
            this.entryGroupStorage = changeOptions(val, this.entryGroupStorage, field);
        } else if (field == 'roleCode') {
            this.roleStorage = changeOptions(val, this.roleStorage, field);
        } else if (field == 'dictKey') {
            this.columnsStorage = changeOptions(val, this.columnsStorage, field);
        }
    }
    /**
     * 获取下拉数据 根据已选择数据排序
     * @param selectedData 已选择的数据
     * @param optionsData 所有选项数据
     * @param key 排序的键值
     * @returns 排序后的结果数组
     */
    sortCheckOptions(selectedData: any[], optionsData: any[], key: string): any[] {
        const selectedOptions = selectedData.map(item => optionsData.find(option => item === option[key])).filter(Boolean);
        // 将已选中项进行排序 (根据角色[0]排在一起)
        selectedOptions.sort((a, b) => Number(b.sortId.replace('YH', '')) - Number(a.sortId.replace('YH', '')));
        const otherOptions = optionsData.filter(option => !selectedOptions.includes(option));
        const sortedOptions = [...selectedOptions, ...otherOptions];

        const map = new Map();
        for (const item of sortedOptions) {
            if (!map.has(item[key])) {
                map.set(item[key], item);
            }
        }
        const newArr = [...map.values()];
        return newArr;

        // return [...new Set(sortedOptions.map(option => option[key]))].map(key => sortedOptions.find(option => option[key] === key));
    }

    private handleEdit() {
        this.isEdit = !this.isEdit;
    }

    private onInput(e) {
        e.target.value = e.target.value.replace(/[^0-9]/g, '');
    }
}
</script>
<style lang="scss" scoped>
#notice-detail {
    height: 100%;
    overflow: auto;
    .card-box {
        margin-bottom: 10px;
        .form-box {
            .left-label {
                /deep/ .el-form-item__label {
                    width: 80px !important;
                }
                /deep/ .el-form-item__content {
                    margin-left: 80px !important;
                }
            }
            /deep/ .el-input--mini {
                width: 70%;
            }
            /deep/ .el-form-item__label {
                color: black;
            }
            /deep/ .el-date-editor .el-range-separator {
                padding: 0 15px;
            }
        }
        .email-title {
            margin-bottom: 20px;
            h2 {
                text-align: center;
                font-size: 1.5em;
            }
            .title-ipt {
                width: 200px;
                margin: 0 auto;
                /deep/ .el-input__inner {
                    font-size: 1.5em;
                }
            }
        }
        .text-box {
            font-family: monospace;
            font-size: inherit;
            white-space: pre-wrap;
        }
        .link-box {
            display: inline-block;
            float: right;
            padding-right: 10px;
            /deep/ .el-link {
                margin: 0 5px;
            }
        }
        .btns {
            display: inline;
            float: right;
            padding-bottom: 20px;
        }

        /deep/ .el-checkbox-group {
            height: 25px;
            .el-checkbox {
                margin-right: 5px;

                .el-checkbox__label {
                    padding-left: 5px;
                }
            }
        }

        .h3-style {
            span {
                margin: 0 30px 0 10px;
                color: red;
            }
        }
    }
}
.left-label2 {
    /deep/ .el-form-item__label {
        width: 95px !important;
    }
    /deep/ .el-form-item__content {
        margin-left: 95px !important;
    }
}
// /deep/ .el-input--suffix .el-input__inner {
//     height: 28px !important;
// }

// /deep/ .el-select__tags {
//     height: 28px !important;
// }

// /deep/ .el-select__tags span.el-tag:first-child .el-select__tags-text {
//     width: calc(100% - 18px);
//     overflow: hidden;
//     text-overflow: ellipsis;
//     white-space: nowrap;
//     display: inline-block;
// }

// /deep/ .el-select__tags span.el-tag:first-child {
//     width: 45%;

//     .el-tag__close {
//         top: -3px;
//     }
// }

// /deep/ .el-select__tags span.el-tag:nth-child(2) {
//     padding: 0 5px;
// }
</style>
